﻿
.authentication{

    height: 100vh;
    max-height: 1050px;
    padding: 0;
    position: relative;
    
    .container>.content-center{
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 0 15px;
        width: 100%;
        max-width: 960px;
        z-index: 99;
    }

    &::before{
        background-image: url('../../assets/images/logo.svg');
        content: '';        
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        opacity: 0.02;
        width: 100%;
        height: 100%;
    }

    .company_detail{
        color: $white-color;
        @extend .align-left;

        .logo{
            @extend .m-t-0;
            @extend .m-b-40;
            img{
                width: 40px;
                vertical-align: top;
            }
        }
        hr{
            border-top:1px solid rgba(255,255,255,.05); 
        }
        h3{
            font-weight: $font-weight-300;
            text-transform: uppercase;
            opacity: 0.7;
            letter-spacing: 2px;
            @extend .m-b-10;
            i{
                font-size: 30px;
                margin: 0 2px;
            }
        }
        p{
            opacity: 0.6;
            letter-spacing: 1px;
            font-weight: $font-weight-300;
        }
        .social_link{
            @extend .padding-0;               
            li{
                @extend .inlineblock;
            }         
        }
        .footer ul li:first-child{
            a{
                @extend .p-l-0;
            }
        }
    }

    .card-plain{

        border-radius: $border-radius-large;
        padding-bottom: $padding-base-horizontal;
        max-width: 330px;
        padding: 20px;
        background: $white;
        box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.3);

        &.card-plain{
            margin: 0 auto;
            
        }
        .header{
            @extend .m-b-20;
            h5{
                @extend .m-b-0;
            }
            img{
                width: 80px;
                border: 3px solid #fff;
                box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
            }
        }
        .footer{
            padding: 15px 0;
        }
    }
   
    .checkbox{
        label{
            font-size: 12px;
        }
    }
} 

@media screen and (max-width: 992px) {
    .authentication{
        .company_detail{
            text-align: center;
            margin-bottom: 30px;
        }
    }
}

@media only screen and (max-width: 767px) {
    .authentication{
        &::before{
            position: fixed;
        }
        .container>.content-center{
            transform:none;
            position: relative;
            top: auto;
            left: auto;
            padding: 40px 0;
        }
        .company_detail{
            h3{
                font-size: 24px;
            }
        }
    }
}